<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        <div class="head-search">收藏</div>
      </div>
    </div>
    <div class="content">
		  <div v-for="item in dataList" class="block">
        <!--个人收藏-->
        <div v-show="item.type == 1">
          <div @click="jumpDetail(item)">
            <div class="block-top">
              <div v-if="item.collectType == 1">{{item.title}}</div>
              <div v-else-if="item.collectType == 2">{{item.companyName}}</div>
              <div v-else></div>

              <span>{{item.addtime}}</span>
            </div>
            <div class="block-btm">
              <div v-if="item.collectType == 1">{{item.companyName}}</div>
              <div v-else-if="item.collectType == 2">正招职位:&nbsp;{{item.recruitCount}}</div>
              <div v-else></div>

              <div v-if="item.collectType == 1">
                <span v-show="item.recruitStatus != 0" class="bbb">停止招聘</span>
                <span v-show="item.recruitStatus == 0">正在招聘</span>
              </div>
              <div v-else-if="item.collectType == 2">
                <span v-show="item.recruitStatus > 0">正在招聘</span>
                <span v-show="item.recruitCount <= 0" class="bbb">停止招聘</span>
              </div>
            </div>
          </div>
          <div class="block-btn">
            <!--停止招聘时不能发简历，但是可以取消收藏-->
            <div v-show="item.collectType == 1">
              <div class="green" @click="sendResume(item.collectId)" v-show="item.recruitStatus == 0">发送简历</div>
            </div>
            <div class="grey" @click="cansleCollect(item.userId, item.collectId, item.collectType)">取消收藏</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {MessageBox, Toast} from 'mint-ui'

export default {
  inject: ['reload'],
  name: 'usersStore',
  userId: localStorage.getItem("userId"),
  components: {},
  created () {
    this.init()
  },
  mounted () {

  },
  // data() 为变量赋值等
  data () {
    return {
	    dataList: [],
      status: localStorage.status,
      list: [
        {
          name: 'Java开发',
          time: '2021-12-01',
          to: '大连xxxxx公司',
          look: 0
        }
      ],
      list1: [
        {
          name: '大连xxxxx公司',
          time: '2021-12-01',
          to: 1
        }
      ],
      lists: [
        {
          name: '张三',
          time: '2021-12-01',
          to: 'web前端'
        }
      ]
    }
  },
  // methods 编写js函数
  methods: {
    // 跳转公司
    // 跳转职位
    jumpDetail (collect) {
      if (collect.collectType == 1) { // 职位信息
        this.$http({
          method: 'get',
          url: Vue.prototype.AppURL + '/comuser/get/recruit/data',
          params: {
            id: collect.collectId
          }
        }).then(({data}) => {
          localStorage.setItem("globel_recruitId", collect.collectId);
          localStorage.setItem("globel_data", JSON.stringify(data.recruit));
          this.$router.push({ name: 'usersPost', params: { recruitId: collect.collectId, jumpPath: 'usersStore' } })
        })
      } else if (collect.collectType == 2) { // 公司信息
        this.$router.push({ name: 'companyFirm', params: { companyId: collect.collectId, jumpPath: 'usersStore'  } })
      }
    },
    sendResume (collectId) {
      let userId = localStorage.getItem("userId");
      // 检测简历信息是否完善
      this.$http({
        method: 'get',
        params: {
          userId: userId
        },
        url: 'api/userResume/checkPersonResume'
      }).then(({data}) => {
        if (data && data.data) {
          //检测是否已经投递过
          this.$http({
            method: 'get',
            url: 'api/userResume/checkDeliverVita',
            params: {
              'recruitId': collectId,
              'userId': localStorage.getItem('userId')
            }
          }).then(({data}) => {
            console.log(data)
            if (!data.data) {
              MessageBox.confirm('确定要投递该职位吗?').then((action) => {
                this.$http({
                  method: 'get',
                  url: 'api/userResume/doDeliverVita',
                  params: {
                    'recruitId': collectId,
                    'userId': localStorage.getItem('userId')
                  }
                }).then(({data}) => {
                  console.log(data)
                  if (data.data) {
                    Toast('投递成功')
                  } else {
                    Toast('投递失败')
                  }
                })
              }).catch((err) => {
                console.log(err)
              })
            } else {
              Toast('简历已投递过啦')
            }
          })
        } else {
          Toast('投递失败，简历不完善，请先完善简历！')
          this.$router.push({name: 'usersResume'});
        }
      })
    },
    cansleCollect (userId, collectId, collectType) {
      // 个人收藏表删除数据
      // 获取登录账户id 后台获取
      // 职位id JobDetail.recruit.id
      MessageBox.confirm('确定取消收藏吗?').then((action) => {
        console.log("123123123")
        this.$http({
          method: "get",
          url: Vue.prototype.AppURL +  '/index/un/collect',
          params: {
            resumeId: collectId,
            type: collectType,
            userId: userId,
          }
        }).then(({data}) => {
          if (data.data) {
            Toast('取消收藏成功')
          } else {
            Toast('取消收藏失败')
          }
          this.init()
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    init () {
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/index/query/collect/list',
        params: {
          page: 1,
          limit: 10,
          userId: window.localStorage.getItem('userId')
        }
      }).then(({data}) => {
        console.log(data)
        this.dataList = data.data
      })
    },
    goPost () {
      this.$router.push('/usersPost')
    },
    back () {
      // this.$router.go(-1)
      this.$router.push({name: 'usersMy'});
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 84px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 40px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.block{
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #c7c7c7;
    margin-bottom: 10px;
}
.block-top,.block-btm{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.block-top{
    margin-bottom: 10px;
}
.block-top div{
    font-size: 16px;
}
.block-top span{
    font-size: 12px;
    color: #bbb;
}
.block-btm div{
    color: #bbb;
    font-size: 14px;
}
.block-btm span{
    font-size: 14px;
    color: #3e63a8;
}
.block-btn{
  display: flex;
  width: 100%;
  margin-top: 10px;
}
.green{
  background: #3e63a8;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  margin-right: 10px;
}
.grey{
  background: #ccc;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
}
.bbb{
  color: #bbb !important;
}
</style>
